<template>
    <div class="breadcrumb-breadcrumb">
        <i class="el-icon-s-home"></i>
        <div class="title">当前位置:</div>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "breadcrumb",
    components: {},
    props: {},
    data() {
        return {};
    },
    mounted() {},
    watch: {},
    methods: {},
};
</script>

<style lang="scss">
.breadcrumb-breadcrumb {
    display: flex;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    color: #666666;
    font-size: 14px;
    padding-top: 30px;

    i {
        color: #777777;
    }

    .title {
        padding-right: 6px;
        padding-left: 2px;
    }
    .el-breadcrumb__item{
        display: flex;
        align-items: center;
    }
    .el-breadcrumb__inner {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 300px;
    }
}
</style>